<template>
  <div style="padding: 20px">
    <el-table :data="state.list" v-loading="state.loading">
      <el-table-column label="ID" type="index" min-width="80"></el-table-column>
      <el-table-column label="姓名" prop="name" min-width="80"></el-table-column>
      <el-table-column label="注册日期" prop="create_time" min-width="120"></el-table-column>
      <el-table-column label="答题率正确率" min-width="120" prop="yes_questions"></el-table-column>
      <el-table-column label="课件学习率" min-width="120" prop="test_paper"></el-table-column>
      <el-table-column label="获取证书" min-width="120" prop="certificateNum"></el-table-column>
    </el-table>
    <!-- <el-pagination
      style="margin-top: 10px"
      background
      v-model:current-page="state.pagination.page"
      v-model:page-size="state.pagination.rows"
      layout="->,total, sizes, prev, pager, next, jumper"
      :total="state.total"
      @current-change="getList"
      @size-change="getList"
    /> -->
  </div>
</template>

<script lang="ts" setup>
import { reactive } from 'vue'
import { getStudy } from '@/api/dashboard'
const state = reactive({
  loading: false,
  pagination: {
    rows: 20,
    page: 1
  },
  total: 0,
  list: []
})

const getData = async () => {
  const { data } = await getStudy()
  state.list = data
}
getData()
</script>

<style lang="scss" scoped></style>
